<template>
    <w-pop :direction="'ttb'" ref="pop">
        <div class="type_container">
            <button class="item" @click="handleSort('', '', '默認排序')">默認排序</button>
            <button class="item" @click="handleSort('upTimeSort', 0, '由舊到新')">上架時間：由舊到新</button>
            <button class="item" @click="handleSort('upTimeSort', 1, '由新到舊')">上架時間：由新到舊</button>
            <button class="item" @click="handleSort('priceSort', 0, '價格：由高至低')">價格：由高至低</button>
            <button class="item" @click="handleSort('priceSort', 1, '價格：由低至高')">價格：由低至高</button>
            <button class="item" @click="handleSort('sales', 0, '銷量：由高至低')">銷量：由高至低</button>
            <button class="item" @click="handleSort('sales', 1, '銷量：由低至高')">銷量：由低至高</button>
        </div>
    </w-pop>
</template>

<script>
import { defineComponent, ref, reactive, nextTick, onMounted, toRaw, toRefs, watch } from 'vue'
export default defineComponent({
    setup(props, { emit }) {
        const pop = ref()
        const open = () => {
            pop.value.open()
        }

        const handleSort = (type, v, txt) => {
            emit('handleSort', type, v, txt)
            pop.value.close()
        }
        return {
            pop,
            open,
            handleSort
        }
    }
})
</script>
<style scoped lang='scss'>
.type_container {
    flex-direction: column;
    position: relative;
    padding: 0 16px;

    .item {
        display: block;
        background-color: #fff;
        border: none;
        width: 100%;
        justify-content: center;
        line-height: 50px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        color: #666;
        font-family: Helvetica;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        padding-left: 16px;
    }

    .item:last-child {
        border: none;
    }

    .item:active {
        color: var(--el-color-primary);
    }

    .item:focus {
        color: var(--el-color-primary);
    }

}

.footer {
    width: 100%;
    position: absolute;
    padding: 16px;
    bottom: 100px;

    button {
        width: 100%;
    }
}
</style>